<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state_map</title>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/china.js"></script>
    <script type="text/javascript" src="/js/bmap.js"></script>
</head>
<body>
<div id="main" style="width: 2000px;height: 2000px">

</div>

<script>
    $(function () {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        myChart.showLoading();
        $.getJSON("/space/findPrv",function (values){
            var pdata = []
            for(var i=0;i<values.length;i++){
                var json = {}
                json["name"]=values[i]['province']
                json["value"] = values[i]['value']
                pdata.push(json)
            }
            $.get('/json/china.json', function (chinaJson) {
                myChart.hideLoading();
                echarts.registerMap('China', chinaJson);
                option = {
                    title: {
                        text: '中国各省份数据展示',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        showDelay: 0,
                        transitionDuration: 0.2
                    },
                    visualMap: {
                        left: 'right',
                        min: 0,
                        max: 100,
                        inRange: {
                            color: [
                                '#313695',
                                '#4575b4',
                                '#74add1',
                                '#abd9e9',
                                '#e0f3f8',
                                '#ffffbf',
                                '#fee090',
                                '#fdae61',
                                '#f46d43',
                                '#d73027',
                                '#a50026'
                            ]
                        },
                        text: ['高', '低'],
                        calculable: true
                    },
                    toolbox: {
                        show: true,
                        //orient: 'vertical',
                        left: 'left',
                        top: 'top',
                        feature: {
                            dataView: { readOnly: false },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '数据名称',
                            type: 'map',
                            map: 'China',
                            label: {
                                show: true
                            },
                            data: pdata
                        }
                    ]
                };
                myChart.setOption(option);
            });

            option && myChart.setOption(option);
        })
    })
</script>
</body>
</html>
